import { defineComponent, reactive, onMounted } from 'vue'
import Draw from './draw'

export default defineComponent({
	components: {
		Draw
	},
	setup() {
		const cdata = reactive({
			category: ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水', '雄安新区', '定州', '辛集'],
			lineData: [32808, 62677, 28348, 56061, 39867, 67560, 36097, 24045, 59521, 48444, 32677, 50415, 20728, 18092],
			barData: [7500, 24450, 6500, 23200, 9900, 33300, 8500, 5500, 25250, 14000, 24450, 21500, 5000, 4600],
			rateData: []
		})

		// methods
		const setData = () => {
			for (let i = 0; i < cdata.barData.length; i++) {
				const lineVal = cdata.lineData[i]
				const barVal = cdata.barData[i]
				// 处理lineVal为0的情况，默认赋值0或其他合理值
				const rate = lineVal === 0 ? 0 : barVal / lineVal
				cdata.rateData.push(Number(rate.toFixed(2)))
			}
		}

		// 生命周期
		onMounted(() => {
			setData()
		})

		return () => {
			return (
				<div>
					<Draw cdata={cdata} />
				</div>
			)
		}
	}
})
